<template>
  <div class="diet-recommendation">
    <!-- 今日专属推荐标题 -->
    <h2 class="section-title">今日专属推荐</h2>

    <!-- 选项卡 -->
    <div class="tabs">
      <button 
        class="tab" 
        :class="{ active: activeTab === 'breakfast' }" 
        @click="activeTab = 'breakfast'"
      >
        早餐
      </button>
      <button 
        class="tab" 
        :class="{ active: activeTab === 'lunch' }" 
        @click="activeTab = 'lunch'"
      >
        午餐
      </button>
      <button 
        class="tab" 
        :class="{ active: activeTab === 'dinner' }" 
        @click="activeTab = 'dinner'"
      >
        晚餐
      </button>
    </div>

    <!-- 餐品卡片区域 -->
    <div class="meals-container">
      <div class="meal-card" v-if="activeTab === 'breakfast'">
        <img 
          src="https://ts1.tc.mm.bing.net/th/id/OIP-C.VqqySLJ9NEXKY75fcxtXCgHaE7?w=240&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc5&dpr=2.3&pid=3.1&rm=2" 
          alt="早餐推荐" 
          class="meal-img" 
        />
        
      </div>

      <!-- 午餐/晚餐卡片（可根据需求扩展） -->
      <div class="meal-card" v-if="activeTab === 'lunch'">
        <img 
          src="https://ts1.tc.mm.bing.net/th/id/OIP-C.VqqySLJ9NEXKY75fcxtXCgHaE7?w=240&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc5&dpr=2.3&pid=3.1&rm=2" 
          alt="午餐推荐" 
          class="meal-img" 
        />
        
      </div>
      <div class="meal-card" v-if="activeTab === 'dinner'">
        <img 
          src="https://ts1.tc.mm.bing.net/th/id/OIP-C.VqqySLJ9NEXKY75fcxtXCgHaE7?w=240&h=211&c=8&rs=1&qlt=90&o=6&cb=thwsc5&dpr=2.3&pid=3.1&rm=2" 
          alt="晚餐推荐" 
          class="meal-img" 
        />
        
      </div>
    </div>

    <!-- 定制减脂餐单按钮 -->
    <button class="customize-btn"><router-link to="/cmenu">定制你的减脂餐单</router-link></button>

    <!-- 营养医师定制模块 -->
    <div class="nutrition-section">
      <h3 class="nutrition-title">
        营养医师定制
        <span class="tooltip">?</span>
      </h3>
      <div class="nutrition-card">
        <span class="tag new-tag">最新</span>
        <span class="tag vip-tag">会员免费</span>
        <img 
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.YKbrzFxLpFleCHRO5l1tjAHaFq?w=246&h=188&c=7&r=0&o=7&dpr=2.3&pid=1.7&rm=3" 
          alt="28天控卡食谱" 
          class="nutrition-img" 
        />
        <h4 class="recipe-title">28天控卡食谱</h4>
        <button class="recipe-btn">新用户首月¥12</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式控制激活的选项卡
const activeTab = ref('breakfast');
</script>

<style scoped>
/* 整体容器 */
.diet-recommendation {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/*  section 标题 */
.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

/* 选项卡容器 */
.tabs {
  display: flex;
  gap: 40px;
  margin-bottom: 24px;
}

/* 选项卡按钮 */
.tab {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding-bottom: 4px;
  position: relative;
  transition: color 0.2s;
}

/* 选项卡激活状态 */
.tab.active {
  color: #333;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}

/* 餐品卡片容器 */
.meals-container {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

/* 单个餐品卡片 */
.meal-card {
  position: relative;
}

.meal-img {
  width: 280px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

/* 更换按钮 */
.change-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: background-color 0.2s;
}

.change-btn:hover {
  background-color: #fff;
}

/* 定制按钮 */
.customize-btn {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 48px;
  padding: 12px 0;
  border: 1px solid #ff6b6b;
  border-radius: 6px;
  background-color: transparent;
  color: #ff6b6b;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.customize-btn:hover {
  background-color: #ff6b6b;
  color: #fff;
}

/* 营养医师模块 */
.nutrition-section {
  margin-top: 56px;
}

.nutrition-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* 提示tooltip */
.tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 12px;
  color: #999;
  margin-left: 8px;
  cursor: help;
}

/* 营养卡片 */
.nutrition-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.nutrition-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* 标签 */
.tag {
  position: absolute;
  top: 16px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.new-tag {
  left: 16px;
  background-color: #ff4d4f;
}

.vip-tag {
  right: 16px;
  background-color: #52c41a;
}

/* 食谱标题 */
.recipe-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 食谱按钮 */
.recipe-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 32px;
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
  transition: background-color 0.2s ease;
}

.recipe-btn:hover {
  background-color: #ff4d4f;
}
</style>